<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .aa{
        width:60%;
        height: 400px;
        display: flex;
/*
        justify-content: space-around; !*相当于给每个盒子添加了左右margin外边距*!
*/

        /*flex-wrap: nowrap;*/
        flex-wrap: wrap;

        /*flex-wrap: wrap-reverse;*/
    }
    .aa div{
        width:200px;
        height:100px;
        border:1px solid red;
        margin:10px 10px;
    }
    p{
        margin-top:20%;
        text-align:center;
    }
   /* .aa div:nth-child(3){

       background:red;
        color:#fff;
        flex-grow:1;
    }*/
    /*
    .aa div:nth-child(2){
        float:left;
    }
    .aa div:nth-child(1){
        float:left;
    }*/
</style>
<body>
    <div class="aa">
        <div><P>1111</P></div>
        <div><p>2222</P></div>
        <div><p>3333</P></div>
        <div><p>1111</P></div>
        <div><p>2222</P></div>
        <div><p>3333</P></div>
        <div><p>1111</p></div>
        <div><p>2222</P></div>
        <div><p>3333</P></div>
        <div><p>1111</P></div>
        <div><p>2222</P></div>
        <div><p>3333</P></div>
    </div>

</body>
</html>